<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-page">
    <div class="card">
      <img src="@/assets/logo.png" alt="" class="logo" />
      <div class="loginForm">
        <el-form ref="login" :model="loginForm" :rules="loginRules">
          <el-form-item prop="loginName">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-mobile-phone"
              v-model="loginForm.loginName"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              type="password"
              v-model="loginForm.password"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入验证码"
              prefix-icon="el-icon-circle-check"
              v-model="loginForm.code"
            >
              <template #suffix>
                <div class="code" @click="getCode">
                  <img class="code" :src="imgURL" alt="" />
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-button
            type="button"
            :loading="loading"
            @click.native.prevent="handleLogin"
            >登录</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode,login } from '@/api/user'
export default {
  data() {
    return {
      loginForm: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType:0,
        clientToken:''
      },
      loginRules: {
        loginName: [{ required: true, message: '请输入帐号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      loading: false,
      imgURL: '',
    }
  },
  async created() {
    this.getCode()
  },
  methods: {
    // 获取随机数
    getRandom(){
      this.loginForm.clientToken= Math.random().toString(16).substring(2)
    },
    // 获取验证码图片
    async getCode() {
      this.getRandom()
      const { data } = await getCode(this.loginForm.clientToken)
      this.imgURL = URL.createObjectURL(data)
      console.log(this.imgURL)
    },
    // 登录提交表单
    async handleLogin(){
      this.loading = true
      try{
        await this.$refs.login.validate()
        const res= await login(this.loginForm)
        console.log(res);
        this.$router.push('/home')
      }catch(e){
        console.log(e);
      } 
      this.loading = false   
    }
  },
}
</script>

<style lang="less" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  background-image: url(~@/assets/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .card {
    width: 518px;
    height: 388px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    .logo {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      margin-left: -48px;
    }
    .loginForm {
      padding: 75px 35px 0;
      .el-input {
        ::v-deep .el-input__inner {
          height: 52px;
        }
        .code {
          height: 100%;
          margin-right: -3px;
        }
      }
      button {
        width: 100%;
        height: 52px;
        background: linear-gradient(262deg, #2e50e1, #6878f0);
        opacity: 0.91;
        border-radius: 8px;
        color: #fff;
        text-shadow: 0 7px 22px #cfcfcf;
        border: 1px solid #d8dde3;
        font-size: 14px;
      }
    }
  }
}
</style>
